<template>
  <div class="flex justify-start">
    <div class="max-w-xs lg:max-w-md px-4 py-3 rounded-xl bg-white border border-gray-200 shadow-sm">
      <div class="flex items-start space-x-2">
        <div class="w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
          <svg class="w-3 h-3 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        </div>
        <div class="flex-1">
          <div class="text-sm text-gray-600 mb-1">AI Art Assistant</div>
          <div class="flex items-center space-x-1">
            <span class="text-sm text-gray-500">AI is generating a reply...</span>
            <div class="flex space-x-1">
              <div class="w-1 h-1 bg-primary-400 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
              <div class="w-1 h-1 bg-primary-400 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
              <div class="w-1 h-1 bg-primary-400 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这是一个简单的打字动画组件，不需要额外的逻辑
</script>
